<template>
  <div class="app-container">
    <!-- v-hasPermi="['api:mpManage:addPoster']" -->
    <el-button
      size="small"
      type="primary"
      icon="Plus"
      @click="add()"
      
      >新增</el-button
    >
    <h3></h3>
    <el-form ref="share_sys" v-hasPermi="['member:mpPoster:getOfficialList']" :model="form" label-width="auto" style="max-width: 600px" :rules="formRules">
   
     
     <el-form-item>
      <span>设置了推广新的公众号，海报模板也将以新的模版为主</span>
    </el-form-item>
    <el-form-item label="公众号海报" >
      <div style="display: flex;align-items: center;">
        <el-select style="width: 20vw;" v-model="form.share_sys_user_id" prop="share_sys_user_id" placeholder="请选择要推广的公众号">
          <el-option :label="item.account?.nick_name" :value="item.id" v-for="item in merchantList" :key="item.id" />
        </el-select>
        <el-button type="primary" style="margin-left: 15px;" @click="onSubmit" >提交</el-button>
      </div>
    
      
    </el-form-item>
      </el-form>

    <h3></h3>
    <x-table v-loading="tableLoading" :tableData="info" :propList="propList">
      <template #state="{ row }">
        <el-tag v-if="row.state == 1" type="success" effect="dark">
          启用
        </el-tag>
        <el-tag v-else type="danger" effect="dark"> 禁用 </el-tag>
      </template>
      <template #op="{ row }">
        <!-- v-hasPermi="['api:mpManage:editPoster']" -->
        <el-button
          style="margin-right: 10px"
          size="small"
          type="primary"
          icon="Edit"
          @click="edit(row)"
          v-hasPermi="['member:mpPoster:edit']"
          >编辑</el-button
        >
        <el-popconfirm
          @confirm="clearCache(row)"
          title="清除缓存后将重新生成海报上传至微信服务器，确定要清除吗？"
        >
          <!--   v-hasPermi="['api:mpManage:clearPosterCache']" -->
          <template #reference>
            <el-button
              style="margin-right: 10px"
              size="small"
              type="info"
              icon="Delete"
              v-hasPermi="['member:mpPoster:clearPosterCache']"
              >清除缓存</el-button
            >
          </template>
        </el-popconfirm>
        <!-- v-hasPermi="['api:mpManage:delPoster']" -->
        <el-popconfirm @confirm="del(row)" title="确定要删除吗?">
          <template #reference>
            <el-button size="small" type="danger" icon="Delete"
            v-hasPermi="['member:mpPoster:del']">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </x-table>
  </div>
</template>

<script>
import {
  getList, del, clearPostCache,
  setShareOfficial, getShareOfficial,
  getOfficialList
 } from "@/api/mpManage/mpPoster";
export default {
  name: "mpmpConfigposetConfigindex",
  data() {
    return {
      tableLoading: false,
      merchantList :[],
      form:{},
      formRules: {
        share_sys_user_id: [{
          required: true,
          message:"请选择"
        }]
      },
      propList: [
        {
          label: "名称",
          prop: "name",
        },
        {
          label: "关键字",
          prop: "keywords",
        },
        {
          label: "状态",
          slotName: "state",
        },
        {
          label: "操作",
          slotName: "op",
        },
      ],
      info: [],
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.getInfo();
      this.getOfficialList();
      this.getShareOfficial();
    },
    
    async getShareOfficial() {
      const { data } = await getShareOfficial();
      console.log(data);
      this.form = data;
      // 列表
    },
    async getOfficialList() {
      const { data } = await getOfficialList();
      console.log(data);
      this.merchantList = data;
      // 列表
    },
    async getInfo() {
      const { data } = await getList();
      console.log(data);
      this.info = data;
      // 列表
    },
    onSubmit() { 
        this.$refs.share_sys.validate(async valid => {
          if (valid) { 
            await setShareOfficial(this.form)
            this.$message.success("设置成功")
            this.getShareOfficial()
          }
        })
    },
    add() {
      this.$router.push({ path: "/mp/addPoster" });
    },
    async clearCache(item) {
      console.log(item);
      const params = {
        // appid: this.$store.getters.curMpInfo.appid,
        // keywords_id: item.keywords_id,
        id: item.id,
      };
      await clearPostCache(params);
      this.$message.success("清除成功!");
    },
    edit(item) {
      // this.$router.push({ path: "/mp/addPoster" });
      console.log("/mp/addPoster?id=" + item.id);
      this.$router.push({ path: "/mp/addPoster", query: { id: item.id } });
    },
    async del(item) {
      const { id, keywords_id } = item;
      await del({ id, keywords_id });
      this.$message.success("删除成功");
      this.getInfo();
    },
  },
};
</script>

<style lang="scss" scoped></style>
